<template>
  <div>
    <el-card class="learning-page">
      <div class="top">
        <!-- 分类课程切换页面 -->
        <el-menu mode="horizontal" :default-active="'1'">
          <el-menu-item :index="'1'">职业技能等级鉴定培训</el-menu-item>
          <el-menu-item :index="'2'">数组技术工程师</el-menu-item>
        </el-menu>
        <el-form ref="form" inline style="margin-top: 10px">
          <el-form-item label="课程名称">
            <el-input
              v-model="form.name"
              placeholder="请输入课程名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="课程性质">
            <el-input
              v-model="form.name"
              placeholder="请输入课程性质"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
        <el-radio-group v-model="radio">
          <el-radio-button label="1">人工智能训练师</el-radio-button>
          <el-radio-button label="2">智能硬件装调员</el-radio-button>
        </el-radio-group>
      </div>
      <div class="content">
        <div class="content-item">
          <img src="@/assets/img/图片 3@1x.png" />
          <div class="content-item-title">人工智能技术应用(4040505)</div>
          <div class="content-item-nr">
            <div>课程学时: 96</div>
            <div>课程性质: 理论+实践</div>
          </div>
          <el-button @click="goStudy" class="content-item-button" type="primary"
            >进入课程</el-button
          >
        </div>
        <div class="content-item">
          <img src="@/assets/img/图片 3@1x.png" />
          <div class="content-item-title">人工智能技术应用(4040505)</div>
          <div class="content-item-nr">
            <div>课程学时: 96</div>
            <div>课程性质: 理论+实践</div>
          </div>
          <el-button class="content-item-button" type="primary"
            >进入课程</el-button
          >
        </div>
        <div class="content-item">
          <img src="@/assets/img/图片 3@1x.png" />
          <div class="content-item-title">人工智能技术应用(4040505)</div>
          <div class="content-item-nr">
            <div>课程学时: 96</div>
            <div>课程性质: 理论+实践</div>
          </div>
          <el-button class="content-item-button" type="primary"
            >进入课程</el-button
          >
        </div>
        <div class="content-item">
          <img src="@/assets/img/图片 3@1x.png" />
          <div class="content-item-title">人工智能技术应用(4040505)</div>
          <div class="content-item-nr">
            <div>课程学时: 96</div>
            <div>课程性质: 理论+实践</div>
          </div>
          <el-button class="content-item-button" type="primary"
            >进入课程</el-button
          >
        </div>
        <div class="content-item">
          <img src="@/assets/img/图片 3@1x.png" />
          <div class="content-item-title">人工智能技术应用(4040505)</div>
          <div class="content-item-nr">
            <div>课程学时: 96</div>
            <div>课程性质: 理论+实践</div>
          </div>
          <el-button class="content-item-button" type="primary"
            >进入课程</el-button
          >
        </div>
        <div class="content-item">
          <img src="@/assets/img/图片 3@1x.png" />
          <div class="content-item-title">人工智能技术应用(4040505)</div>
          <div class="content-item-nr">
            <div>课程学时: 96</div>
            <div>课程性质: 理论+实践</div>
          </div>
          <el-button class="content-item-button" type="primary"
            >进入课程</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
let state = reactive({
  form: {
    name: "",
  },
  radio: "1",
});
let { form, radio } = toRefs(state);
function goStudy() {
  router.push("/learning/enterCourse");
}
</script>

<style lang="scss" scoped>
.learning-page {
  .content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(445px, 1fr));
    margin-top: 10px;
    .content-item {
      border-radius: 10px;
      width: 445px;
      height: 384px;
      border: 1px solid #ebebeb;
      margin-bottom: 20px;
      img {
        width: 100%;
      }
      .content-item-title {
        font-weight: bold;
        font-size: 18px;
        margin: 20px 0 20px 23px;
      }
      .content-item-nr {
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        color: rgba(16, 16, 16, 0.4);
        padding: 0 23px;
        margin-bottom: 20px;
      }
      .content-item-button {
        margin-left: 23px;
        border-radius: 30px;
      }
    }
  }
}
</style>
